<template>
  <div id='order'>
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>全部订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--内容头部  end-->
    <!--筛选条件 start-->
    <div class="condition-wrap">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="queryVo.phoneNo" placeholder="请输入" icon="edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleseach">搜索</el-button>
            <!--@click="onSubmit"-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--筛选条件 end-->
    <!--订单列表 start-->
    <div class='option-wrap'>
      <el-button type="text" @click="handleadminStatus('U')">待处理</el-button>
      <el-button type="text" @click="handleadminStatus('12')">已完成</el-button>
      <el-button type="text" @click="handleadminStatus('Q')">已取消</el-button>
      <el-button type="text" @click="handleadminStatus('N')">无效订单</el-button>
      <el-button type="text" @click="queryOrders()">全部</el-button>
      <el-button type="primary" @click="dialogVisible.addOrderVisible = true"><i class="el-icon-plus"> </i> 新增订单
      </el-button>
    </div>

    <div class="gird-wrap">
      <el-table :data="dataList" :border="true" height="700" style="width: 100%"
        :default-sort="{prop: 'createTime', order: 'descending'}">
        <el-table-column prop="createTime" label="创建时间" sortable="true"> </el-table-column>
        <el-table-column prop="No" label="订单编号" sortable> </el-table-column>
        <el-table-column prop="customerName" label="客户信息" sortable> </el-table-column>
        <el-table-column prop="phoneNo" label="客户电话" sortable> </el-table-column>
        <el-table-column prop="modelName" label="机型" sortable></el-table-column>
        <el-table-column prop="serviceTypeName" label="预约信息" sortable> </el-table-column>
        <el-table-column prop="adminStatusName" label="状态" sortable> </el-table-column>
        <el-table-column label="操作" width="170" fixed="right">
          <template scope="scope">
            <!-- <el-button type="text" @click="showOrderDetail(scope.row)">详情</el-button> -->
            <el-button type="text" v-if="scope.row.adminStatusNo === 'U'"
              @click="customerOrderservice(scope.row, {status:'N',name:'无效'})">
              无效
            </el-button>
            <el-button type="text" v-if="scope.row.adminStatusNo === 'U'"
              @click="customerOrderservice(scope.row, {status:'12',name:'已完成'})">
              完成
            </el-button>
            <el-button type="text" v-if="scope.row.adminStatusNo === 'U'"
              @click="customerOrderservice(scope.row, {status:'Q',name:'取消'})">
              取消
            </el-button>
            <el-button type="text" v-if="scope.row.adminStatusNo === '12'"
              @click="customerOrderservice(scope.row,{status:'14',name:'售后'})">
              售后
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增订单" v-model="dialogVisible.addOrderVisible" size="large" :before-close="beforeClose">
      <add-order :editInfo="editInfo" :selected="selected" :faltArray="faltArray" @save="createOneOrder"
        @canleadd="canleadd"></add-order>
    </el-dialog>

    <el-dialog v-model="dialogVisible.updateOrder.updateOrderVisible" :title="dialogVisible.updateOrder.title"
      size="tiny">
      <span>{{dialogVisible.updateOrder.tips}}</span>
      <el-select v-if="dialogVisible.updateOrder.showTextInput" v-model="dialogVisible.updateOrder.reason">
        <el-option v-for="item in dialogVisible.updateOrder.cancelList" :label="item.DEAD_REASON"
          :value="item.DEAD_CODE" :key="item"></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.updateOrder.updateOrderVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible.updateOrder.action">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible.modifyOrderVisible" title="订单详情" size="large" top="2%"
      :before-close="beforeModel">
      <modify-order :editInfo="editinfo" :modellist="modellist" :dataProvider="selectedRow" @saveup="updateOrder"
        @canle="canleOrder" @cancelreason="cancelRea"></modify-order>
    </el-dialog>

    <el-dialog v-model="dialogVisible.serviceOrderVisible" title="返修" size="small">
      <c-service :dataOrder="choiceRow" @saveser="serviceOrder" @canleser="canleService"></c-service>
    </el-dialog>
  </div>

</template>
<script>
  import ModifyOrder from './order/OrderEditDetail'
  import AddOrder from './order/AddOrder'
  import CService from './order/CustomerService'
  import r from '../utils/RequestUtil';
  import wxs from '../utils/WxsService';

  export default {
    name: 'order_2',
    components: {
      AddOrder,
      ModifyOrder,
      CService
    },
    data: function () {
      return {
        statusNo: null,
        queryVo: {
          pageSize: 10,
          pageNo: 1,
          engineerId: null,
          phoneNo: null,
          yyBeginTime: null,
          endTime: null,
          serviceType: null,
          customerName: null,
          orderNo: null,
          fuzzyQuery: null,
          createTime: null,
          orderIdentifier: null,
          adminStatus: null,
          isCancel: null,
          isAlive: null,
          maintainStatus: null,
          time: [],
          beginTime: null,
          endTime: null,
          contactState: 0,
          overTimeContactState: 0
        },
        dialogVisible: {
          addOrderVisible: false,
          serviceOrderVisible: false,
          modifyOrderVisible: false,
          updateOrder: {
            cancelList: [],
            updateOrderVisible: false,
            showTextInput: false,
            title: '',
            tips: '',
            reasonDesc: '',
            reason: null,
            action: () => {}
          }
        },
        dataList: [],
        totalcount: 0,
        brandinfos: [],
        subFailure: [],
        engineerinfolist: [],
        props: {
          value: "name",
          label: "name",
          children: "children"
        },
        failProps: {
          value: "value",
          label: "label",
          children: "children"
        },
        cityprops: {
          value: "provinceName",
          label: "provinceName",
          children: "children"
        },
        shopinfo: {},
        maincenter: {},
        orderFailureinfo: {},

        timestartandend: null,
        getposition: [],
        orderFailurelist: [],
        solution: null,
        selectedRow: null,
        choiceRow: null,
        selecturl: null,
        editInfo: {},
        selected: {
          selectedCity: [],
          selectedDevice: [],
          selectedMainCenter: null,
          selectedShopInfo: null
        },
        faltArray: [{
          detid: 0
        }],
        editinfo: {
          dated: null,
          startTime: null,
          endTime: null,
          canlereason: null,
          serviceRemark: null,
          wxsRemark: null,
          customerName: null,
          phoneNo: null,
          address: null
        },
        modellist: {
          faltArr: [],
          citys: [],
          brands: [],
          shopName: null,
          centerName: null,
          serviceType: null
        },
      }
    },
    methods: {
      beforeModel() {
        this.returnModelNull();
        this.dialogVisible.modifyOrderVisible = false;
      },
      returnModelNull() {
        this.editinfo.dated = null;
        this.editinfo.startTime = null;
        this.editinfo.endTime = null;
        this.editinfo.canlereason = null;
        this.editinfo.serviceRemark = null;
        this.editinfo.wxsRemark = null;
        this.editinfo.customerName = null;
        this.editinfo.phoneNo = null;
        this.editinfo.address = null;
        this.editInfo.failureDetailNo = null;
        this.editInfo.flatName = null;
        this.editInfo.failureDetailName = null;
        this.editInfo.failureDetailNo = null;

        this.modellist.faltArr = [];
        this.modellist.citys = [];
        this.modellist.brands = [];
        this.modellist.shopName = null;
        this.modellist.centerName = null;
        this.modellist.serviceType = null;

        this.engineerinfolist = new Array();
      },
      beforeClose() {
        this.returnNull();
        this.dialogVisible.addOrderVisible = false;
      },
      returnNull() {
        this.editInfo.customerName = null;
        this.editInfo.phoneNo = null;
        this.editInfo.address = null;
        this.editInfo.orderIdentifier = null;
        this.editInfo.price = null;
        this.editInfo.solution = null;
        this.editInfo.serviceType = null;
        this.editInfo.date = null;
        this.editInfo.startTime = null;
        this.editInfo.endTime = null;
        this.editInfo.remark = null;
        this.editInfo.serviceRemark = null;
        this.editInfo.wxsRemark = null;
        this.editInfo.actualPrice = null;
        this.editInfo.selectedColor = null;

        this.selected.flatNo = null;
        this.selected.modelNo = null;
        this.selected.brandNo = null;
        this.selected.selectedCity = [];
        this.selected.selectedDevice = [];
        this.selected.selectedMainCenter = null;
        this.selected.selectedShopInfo = null;
        this.faltArray = [{}];
      },
      updateOrder: function (params) {
        this.editinfo = wxs.getOnOrderDetail([{
          No: params.No
        }]);
        this.dialogVisible.modifyOrderVisible = false;
        this.returnModelNull();
        this.queryOrders();
      },
      canleOrder() {
        this.returnModelNull();
        this.dialogVisible.modifyOrderVisible = false;
      },
      canleadd() {
        this.dialogVisible.addOrderVisible = false;
        this.returnNull();
      },
      emptymodel() {
        this.queryVo.brandName = this.comBrandName;
        this.queryVo.modelName = this.comModelName;
        if (this.queryVo.orderNo === "" || typeof this.queryVo.orderNo === "undefined") {
          this.queryVo.orderNo = null;
        }
        if (this.queryVo.phoneNo === "" || typeof this.queryVo.phoneNo === "undefined") {
          this.queryVo.phoneNo = null;
        }
        if (this.queryVo.time !== "" || typeof this.queryVo.beginTime !== "undefined" || this.queryVo.time !== null) {
          this.queryVo.beginTime = this.queryVo.time[0];
          this.queryVo.endTime = this.queryVo.time[1];
        }
        if (this.queryVo.serviceType === "" || typeof this.queryVo.serviceType === "undefined") {
          this.queryVo.serviceType = null;
        }
        if (this.queryVo.fuzzyQuery === "" || typeof this.queryVo.fuzzyQuery === "undefined") {
          this.queryVo.fuzzyQuery = null;
        }
        if (this.queryVo.yyBeginTime === "" || typeof this.queryVo.yyBeginTime === "undefined") {
          this.queryVo.yyBeginTime = null;
        }
        if (this.queryVo.createTime === "" || typeof this.queryVo.createTime === "undefined") {
          this.queryVo.createTime = null;
        }
        if (this.queryVo.orderIdentifier === "" || typeof this.queryVo.orderIdentifier === "undefined") {
          this.queryVo.orderIdentifier = null;
        }
        if (this.queryVo.engineerId === "" || typeof this.queryVo.engineerId === "undefined") {
          this.queryVo.engineerId = null;
        }
      },
      queryOrders: function () {
        this.emptymodel();
        this.dataList = wxs.getAllOrderList();
      },
      //新增订单
      createOneOrder: function (data) {
        wxs.addOrderInfo(data);
        this.dialogVisible.addOrderVisible = false;
        this.queryOrders();
        this.returnNull();
      },
      //根据状态搜索
      handleadminStatus: function (statusNo) {
        this.emptymodel();
        this.dataList = wxs.getOnOrderDetail([{
          adminStatusNo: statusNo
        }]);
      },
      cancelRea(cancelOrderNo, canlereason) {
        this.dialogVisible.modifyOrderVisible = false;
      },
      handleseach: function () { //搜索
        this.emptymodel();
        this.dataList = wxs.getOnOrderDetail([{
          phoneNo: this.queryVo.phoneNo
        }]);
      },
      showOrderDetail: function (row) {
        this.editInfo = row;
        this.dialogVisible.modifyOrderVisible = true;
      },
      customerOrderservice(row, item) {
        let data = row;
        data.adminStatusNo = item.status;
        data.adminStatusName = item.name;
        wxs.EditOneOrderInfo(data, data.No);
        this.queryOrders();
      },
      canleService() {
        this.dialogVisible.serviceOrderVisible = false;
      },
      serviceOrder() { //提交修改数据
        let data = this.choiceRow;
        data.adminStatusNo = this.statusNo.status;
        data.adminStatusName = this.statusNo.name;
        wxs.EditOneOrderInfo(data, data.No);
        this.dialogVisible.serviceOrderVisible = false;
      },
      updateOrderStatus: function (row, flag) { //改变订单有效状态
        this.dialogVisible.updateOrder.updateOrderVisible = true;
        let params = new Object();
        params.orderNo = row.orderNo;
        row.deadCode = this.dialogVisible.updateOrder.reason;
        wxs.EditOneOrderInfo(row, row.No);
        this.dialogVisible.updateOrder.updateOrderVisible = false;
        this.dialogVisible.updateOrder.title = "";
        this.dialogVisible.updateOrder.tips = "";
        this.dialogVisible.updateOrder.showTextInput = false;
        this.dialogVisible.updateOrder.reasonDesc = '';
        this.dialogVisible.updateOrder.action = () => {}
      },
    },
    computed: {
      comSubFailure: function () {
        return this.subFailure[1];
      },
      comBrandName: function () {
        return this.brandinfos[1];
      },
      comModelName: function () {
        return this.brandinfos[2];
      }
    },
    mounted: function () {
      this.dialogVisible.updateOrder.cancelList = null;
      this.queryOrders();
    }
  }

</script>

<style scoped="scoped">
  /*内容容器 内边距修改值*/

  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

  #user {
    min-width: 840px;
  }

  .detail {
    padding-bottom: 20px;
  }

  .info {
    display: table;
    width: 100%;
    margin-top: 10px;
  }

  .info-title {
    display: table-cell;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  .info-msg {
    display: table-cell;
    margin-left: 100px;
    margin-right: auto;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .baccec {
    background-color: #ECECEC;
  }

</style>
